<template>
  <div class="register">
  	<div class="container">
	    <div class="main">


				<div class="title">注册账号</div>
				<el-form   :model="ruleForm" :rules="rules" ref="ruleForm"  label-position="top"  label-width="80px" class="form">
		 				<el-form-item prop="email">
		 					<el-input placeholder="账号"   v-model="ruleForm.email"></el-input>
		 				</el-form-item>

		 				<el-form-item prop="pin">
		 					<el-input v-model="ruleForm.pin" placeholder="密码" type="password "  ></el-input>
		 				</el-form-item>

            <el-form-item prop="surnPin">
            	<el-input v-model="ruleForm.surnPin" placeholder="确认密码" type="password "  ></el-input>
            </el-form-item>

		 				<el-form-item>
		 					<el-button type="primary" @click="register('ruleForm')" class="login-btn" v-loading="loading">注 册</el-button>
		 				</el-form-item>
	 			</el-form>

	    </div>
  	</div>

  </div>
</template>

<script>

export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
     	ruleForm:{
      	email:'',
      	pin:'',
      	surnPin:''
      },
      rules: {
        pin: [
          { validator: validatePass, trigger: 'blur' }
        ],
        surnPin: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        email: [
          {  required: true, message: '请填写账号', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
  	register(formName){
	 		this.$refs[formName].validate((valid) => {
	      if (valid) {
	      	// data = this.ruleForm;
	      	let data = JSON.stringify({
	      		email:this.ruleForm.email,
	      		code:this.ruleForm.VCode,
	      		password:md5(this.ruleForm.pin),
	      		info_category:(this.ruleForm.categoryid)?(this.ruleForm.categoryid.join(",")):'',
	      		lang:(localStorage.getItem('langData')=='en')?'en':'cn'
	      	})
	      	this.$router.push({path:'/register-next',query:{data:data,pw:this.ruleForm.pin}})
	      } else {
	        console.log('error submit!!');
	        return false;
	      }
	    });
  	}

  },

}
</script>

<style lang="scss" scoped>

	.span{
		border-radius: 4px;
		display: inline-block;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    padding: 12px 20px;
    font-size: 14px;
    margin:0 10px 10px 0;
	}
	.container{
		display: block;
    position: relative;
    height:100vh;
    background: #949597;
	}
	.span.active{
		color:#176AE6;
		border:1px solid #176AE6;
	}
	.getVCode{
		padding:0 20px;
		border:1px solid rgb(90, 90, 90);
		background: #fff!important;
		color:rgb(90, 90, 90)!important;
		cursor: pointer;
		height: 40px;
		min-width: 82px;
	}
	.next{
		width:100%;
		height:46px;
		line-height:46px;
		color:#fff;
		text-align: center;
		display: inline-block;
		cursor: pointer;
    background:linear-gradient(0deg,rgba(70,153,255,1),rgba(23,106,230,1));
   border-radius:6px;
	}
	.drag{
        position: relative;
        background-color: #e8e8e8;
        width: 100%;
        height: 34px;
        line-height: 34px;
        text-align: center;
    }
    .handler{
        width: 40px;
        height: 32px;
        border: 1px solid #ccc;
        cursor: move;
    }
    .handler_bg{
        background: #fff url("") no-repeat center;
    }
    .handler_ok_bg{
        background: #fff url("") no-repeat center;
    }
    .drag_bg{
        background-color: #e8e8e8;
        height: 34px;
        width: 0px;
    }
    .drag_text{
        position: absolute;
        top: 0px;
        color: rgb(90, 90, 90)!important;
        width: 100%;text-align: center;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select:none;
        -ms-user-select:none;
    }
  .register {
    font-size: 30px;
    text-align: center;
    background: #F5F6FA;
    min-height: 100%;
  }
  .form{
  	width:450px;
  	margin:0 auto;
  	text-align: left;
  }
  .getVCode{
  	background:linear-gradient(0deg,rgba(70,153,255,1),rgba(23,106,230,1));
  	border-radius:6px;
  	color:#fff;
  	margin-left:15px
  }
  .el-button--primary{
    width:100%;
  }
  .el-dropdown-menu.el-popper{
    top:95px!important;
  }
  .main{
  	width:650px;
    position: absolute;
    left:50%;
    top:50%;
    margin-top:-210px;
    margin-left:-325px;
  	background: #fff;
  	padding-bottom: 20px;
    padding-top: 1px;
  	.mySteps{
  		background: #fff;
  	}
  	.title{
  		font-size: 26px;
      text-align: center;
      color: #505458;
  		margin:60px 0 40px 0;
  	}
  }
  .head{
  	height:138px;
  	line-height: 138px;
  	background: #fff;
  	display: flex;
  	padding: 0 50px;

  	.right{
  		text-align:right;
  		flex:1
  	}
  }
  .logo{
  	padding-top:20px;
		img{
			height:100px;
			margin-right:-90px;
		}
		.return{
			float:right;
			margin-right:15px;
		}
	}
</style>
